<template>
  <view>
    <view class="active-container" v-for="item in activeList" :key="item.id">
      <view class="img">
        <view class="money">
          <view>¥</view>
          <view class="view">{{item.price}}</view>
        </view>
        <view class="money-active">{{item.msg}}</view>
      </view>
      <view class="des">
        <view class="tit">{{item.title}}</view>
        <view class="time">
          <view>{{item.created_at}}-{{item.end_time}}</view>
          <view class="active" @click="chooseAcvtive(item)">立即使用</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {createNamespacedHelpers} from 'vuex'
const { mapMutations } = createNamespacedHelpers('escort-service')
export default {
  props: {
    activeList: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      activeInfo: {}
    }
  },
  methods: {
    ...mapMutations(['change_active_info']), 
    chooseAcvtive(item) {
      this.change_active_info(item)
      uni.navigateBack()
    }
  }
}
</script>

<style lang="scss" scoped>
.active-container{
  display: flex;
  background: #FFFFFF;
  margin-top: 20rpx;
  .img{
    width: 200rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    color: #FFFFFF;
    background: url('../../../static/15.png') no-repeat;
    background-size: 100% 100%;
    .money{
      display: flex;
      justify-content: center;
      align-content: center;
      view{
        line-height: 39rpx;
      }
      .view {
        font-size: 46rpx;
        margin-left: 5rpx;
      }
    }
    .money-active{
      display: flex;
      justify-content: center;
      align-content: center;
      margin-top: 20rpx;
    }
  }
  .des{
    flex: 1;
    margin-left: 30rpx;
    display: flex;
    flex-direction: column;
    .tit{
      margin-top: 20rpx;
    }
    .time{
      display: flex;
      justify-content: space-between;
      margin-top: 70rpx;
      color: #9EA3A9;
      font-size: 24rpx;
      .active{
        border: 1px solid #F23030;
        border-radius: 30rpx;
        margin-right: 10rpx;
        color: #F23030;
        padding: 0 10rpx;
        font-size: 24rpx;
      }
    }
  }
}
</style>